<template>
  <up-popup :show="show" @close="hidePopup">
    <view class="header">编辑标签</view>
    <up-tabs :tabs="tabs" :active="active" itemWidth="50%" @change="handleTabChange"></up-tabs>
    <scroll-view  class="content" scroll-y>
      <view v-if="active==0" class="group-list">
        <view class="group-item" v-for="(item,index) in work_tag_list" :key="index">
          <view class="group-item__name">{{ item.group_name }}</view>
          <view class="tag-list">
            <up-tag margin="0 20rpx 20rpx 0" v-for="(tag,tagIndex) in item.list" :type="tag.status==1?'primary':'gray'" :key="tagIndex" @click="handleChange(tag)">{{ tag.tag_name }}</up-tag>
          </view>
        </view>
      </view>
      <view v-if="active==1" class="group-list">
        <view class="group-item" v-for="(item,index) in system_tag_list" :key="index">
          <view class="group-item__name">{{ item.group_name }}</view>
          <view class="tag-list">
            <up-tag margin="0 20rpx 20rpx 0" v-for="(tag,tagIndex) in item.list" :type="tag.status==1?'primary':'gray'" :key="tagIndex" @click="handleChange(tag)">{{ tag.tag_name }}</up-tag>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="footer">
      <up-button type="primary" @click="handleSubmit" shape="circle">确认提交</up-button>
    </view>
  </up-popup>
</template>

<script lang="ts" setup>
import { getUserTagListApi, updateUserTagApi } from '@/addon/htscrm/api';
import { ref } from 'vue';

const prop = defineProps({
  userId: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['close', 'change'])

const show = ref(false)
const system_tag_list = ref<any[]>([])
const work_tag_list = ref<any[]>([])
const system_ids = ref<number[]>([])
const work_ids = ref<number[]>([])

const active = ref(0)
const tabs = [{
  name: "企业标签"
},{
  name: "系统标签"
},]

async function getTagList() {
  const res:any = await getUserTagListApi({
    external_userid: prop.userId
  })
  work_tag_list.value = res.data.work_tag_list;
  system_tag_list.value = res.data.system_tag_list;
  work_ids.value = res.data.work_tag_list.map(item => item.list.filter(tag=> tag.status).map(tag => tag.tag_id)).reduce((prev,current) => prev.concat(current), [])
  system_ids.value = res.data.system_tag_list.map(item => item.list.filter(tag=> tag.status).map(tag => tag.tag_id)).reduce((prev,current) => prev.concat(current), [])
}
function showPopup() {
  show.value = true;
  getTagList()
}
function  hidePopup() {
  show.value = false;
  emit('close');
}
function handleTabChange(e) {
  active.value = e.index;
}

function handleChange(tag) {
  tag.status = tag.status == 1 ? 0 : 1;
}
async function handleSubmit() {
  const params:any = {
    external_userid: prop.userId, //外部联系人id
    add_tags: [], //标签id,系统标签的id是数字，企微是字符串
    remove_tags: [], //标签列表中的status值，原值是什么就传什么
  }
  // 系统标签
  const system_tag_ids = system_tag_list.value.map(item => item.list.filter(tag=> tag.status).map(tag => tag.tag_id)).reduce((prev,current) => prev.concat(current), [])
  const system_add_tags =  system_tag_ids.value.filter(item => !system_ids.value.includes(item))
  const system_remove_tags = system_ids.value.filter(item => !system_tag_ids.value.includes(item))
  // 企微标签
  const work_tag_ids = work_tag_list.value.map(item => item.list.filter(tag=> tag.status).map(tag => tag.tag_id)).reduce((prev,current) => prev.concat(current), [])
  const work_add_tags =  work_tag_ids.value.filter(item => !work_ids.value.includes(item))
  const work_remove_tags = work_ids.value.filter(item => !work_tag_ids.value.includes(item))
  params.add_tags = [...system_add_tags,...work_add_tags]
  params.remove_tags = [...system_remove_tags,...work_remove_tags]

  console.log(params);

  await updateUserTagApi(params)
  uni.showToast({title: '更新成功'})
  emit('change')
  show.value = false;
}
defineExpose({ showPopup, hidePopup })
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  .text {
    margin-left: 5rpx;
  }
}
.header {
  padding: 30rpx;
  text-align: center;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  font-size: 30rpx;
  font-weight: bold;
}
.content {
  height: 60vh;
  display: flex;
  .title {
    padding-bottom: 30rpx;
    text-align: center;
    color: #ccc;
  }
  .group-list {
    padding: 30rpx;
  }
  .group-item {

    .group-item__name {
      font-weight: bold;
      padding: 20rpx 0;
    }

    &:not(:last-child) {

      border-bottom: 1px solid #eee;
    }
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
  }
}
.footer {
  padding: 30rpx;
}
</style>
